<template>
	<div class="ui-grade" :class="[classname,disabledClass]" :style="style">
		<span class="font ui-grade-star" v-for="v in starArr" :class="v.ison?'on':''" @mouseover="mouseover(v.index)" @mouseout="mouseout(index)" @click='click'>&#xe658;</span>
		<span class="ui-grade-point">{{value}}分</span>
		<input type="hidden" :name="name" v-model="value"/>
	</div>
</template>

<script>
	/*
	评分
	组件属性[
		style:自定义样式
		class:自定义class
		type:"文件类型，数组[jpg,gif,png,......]"
		rules:用于表单验证
				[
					empty:[true/false,"提示信息"],
					int:[true/false,"提示信息"],
					min:[200,"提示信息"],
					...
				]

	]
	组件事件[
		change:选项发生改变时回调的父组件方法，callback(obj[当前分数])
	]
	*/
	export default{
		props:{
			'defalutdata':{type:Number,defalut:0},
			'style':{type:null,default:""},
			'classname':{type:null,default:""},
			'size':{type:String,default:'normal'},
			'name':{type:String,default:""},
			'rules':{type:Array,default:[]}
		},
		data(){
			return {
				uiType:"ui-grade",
				starNum:5,
				starArr:[],
				starArrRecord:[],
			}
		},
		methods:{			
			click(){
				this.starArrRecord=clone(this.starArr);
			},
			mouseover(index){
				this.setStar(index);
			},
			mouseout(){
				this.starArr=clone(this.starArrRecord);
			},
			setStar(index){
				let tmp=clone(this.starArr);
				for(let i=0;i<tmp.length;i++){
					if(i<=index){
						tmp[i].ison=true;
					}else{
						tmp[i].ison=false;
					}
				}
				this.starArr=tmp;
			}
		},
		computed:{
			value(){
				let num=0;
				for(let i=0;i<this.starArr.length;i++){
					if(this.starArr[i].ison)num+=1;
				}
				this.$emit('change',this);
				return num;
			}
		},
		created(){
			let tmp=[];
			for(let i=0;i<this.starNum;i++){
				tmp[i]={index:i,ison:false};
			}
			this.starArr=tmp;
			this.starArrRecord=clone(tmp);
		}
	}
</script>

